<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { HoleScore } from '@/types/game-score';
  import { CourseHole } from '@/types/course';
  import { User } from '@/types/user';
  import { Form, Message } from '@arco-design/web-vue';
  import { kickOffTypeNames, kickOffDirectionNames } from '@/config/game';
  import _ from 'lodash';
  import { updatePlayerScore } from '@/api/game';

  const props = defineProps<{
    gameId: string;
    user?: User;
    hole?: CourseHole;
    holeScore?: HoleScore;
  }>();

  const emit = defineEmits(['close']);

  const data = ref<Partial<HoleScore>>({});
  onMounted(() => {
    if (props.holeScore) {
      data.value = _.cloneDeep(props.holeScore);
    }
  });
  const saving = ref(false);
  const formRef = ref<InstanceType<typeof Form> | null>(null);
  const handleSubmit = async () => {
    if (formRef.value) {
      const validateResult = await formRef.value.validate();
      if (!validateResult) {
        try {
          saving.value = true;

          await updatePlayerScore({
            ...data.value,
            gameId: props.gameId,
            holeId: props.hole?.id,
            userId: props.user?.id,
          });

          Message.success('操作成功');
          emit('close', true);
        } finally {
          saving.value = false;
        }
      }
    }
  };
</script>

<template>
  <a-modal
    title="修改单洞成绩"
    :width="500"
    visible
    :ok-loading="saving"
    @cancel="emit('close', false)"
    @before-ok="handleSubmit"
  >
    <div style="padding: 0 50px">
      <a-form ref="formRef" :model="data" auto-label-width>
        <a-form-item label="球员">
          <div>
            {{ user?.nickname }}<span>{{ user?.sex ? '男' : '女' }}</span>
          </div>
        </a-form-item>
        <a-form-item label="手机号码">
          <div>{{ user?.phone }}</div>
        </a-form-item>
        <a-form-item label="证件号码">
          <div>{{ user?.idNo }}</div>
        </a-form-item>
        <a-form-item label="成绩洞号">
          <div>{{ hole?.holeIndex }}</div>
        </a-form-item>
        <a-form-item
          label="总杆数"
          field="parCount"
          :rules="[{ required: true, message: '不能为空' }]"
        >
          <a-input-number
            v-model="data.parCount"
            hide-button
            :precision="0"
            :min="1"
          />
        </a-form-item>
        <a-form-item
          label="推杆数"
          field="putCount"
          :rules="[{ required: true, message: '不能为空' }]"
        >
          <a-input-number
            v-model="data.putCount"
            hide-button
            :precision="0"
            :min="0"
          />
        </a-form-item>
        <a-form-item
          label="罚杆数"
          field="penaltyCount"
          :rules="[{ required: true, message: '不能为空' }]"
        >
          <a-input-number
            v-model="data.penaltyCount"
            hide-button
            :precision="0"
            :min="0"
          />
        </a-form-item>
        <a-form-item
          label="开球情况"
          field="kickOffType"
          :rules="[{ required: true, message: '不能为空' }]"
        >
          <a-select
            v-model="data.kickOffType"
            :options="
              kickOffTypeNames.map((i, index) => ({ label: i, value: index }))
            "
          />
        </a-form-item>
        <a-form-item
          label="开球方向"
          field="kickOffDirection"
          :rules="[{ required: true, message: '不能为空' }]"
        >
          <a-select
            v-model="data.kickOffDirection"
            :options="
              kickOffDirectionNames.map((i, index) => ({
                label: i,
                value: index,
              }))
            "
          />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
